// import * as React from "react";
// import { createRoot } from "react-dom/client";
// import { BrowserRouter } from "react-router-dom";

// const root = createRoot(document.getElementById("root"));

// root.render(
//   <BrowserRouter>

//   </BrowserRouter>
// );
import Home from '@/views/Home'
import path from 'node:path/win32'
import React from 'react'
import { Navigate } from 'react-router-dom'
import Login from '@/views/Login/index'
const About = React.lazy(() => import('@/views/About'))
const User = React.lazy(() => import('@/views/User'))
const Page1 = React.lazy(() => import('@/views/Page1'))
const Page2 = React.lazy(() => import('@/views/Page2'))
const Page3 = React.lazy(() => import('@/views/Page3'))
const Page4 = React.lazy(() => import('@/views/Page4'))
const Page5 = React.lazy(() => import('@/views/Page5'))
const Page6 = React.lazy(() => import('@/views/Page6'))
const Page7 = React.lazy(() => import('@/views/Page7'))
const Page8 = React.lazy(() => import('@/views/Page8'))
const Pageexit = React.lazy(() => import('@/views/Pageexit'))
const load = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>loading...</div>}>
    {comp}
  </React.Suspense>

)
const routes = [
  {
    path: '/',
    element: <Navigate to='/login' />
  },
  {
    path: '/login',
    element: <Login></Login>

  },
  {
    path: '/',
    element: <Home />,
    children: [
      {
        path: '/page1',
        element: load(<Page1 />)
      },
      {
        path: '/page2',
        element: load(<Page2 />)
      },
      {
        path: '/page3/page1',
        element: load(<Page3 />)
      },
      {
        path: '/page3/page2',
        element: load(<Page4 />)
      },
      {
        path: '/page3/page3',
        element: load(<Page5 />)
      },
      {
        path: '/page4/page1',
        element: load(<Page6 />)
      },
      {
        path: '/page4/page2',
        element: load(<Page7 />)
      },
      {
        path: '/page5',
        element: load(<Page8 />)
      },
      {
        path: '/pageexit',
        element: load(<Pageexit />)
      },
    ],
  },
  {
    path: '*',
    element: <Navigate to='/page1' />
  },
  // {
  //   path:'/home',
  //   element:<Home/>
  // },
  // {
  //   path:'/about',
  //   element:load(<About/>)
  // }, 
  //  {
  //   path:'/user',
  //   element:load(<User/>)
  // }
]
export default routes
